/* 容器高度、背景 */
.pu-bpmn-design-container {
  height: 100%;
  width: 100%;
  background: url('') repeat !important;

  .bjs-container {
    .djs-palette {
      top: 20px;
    }

    .djs-group {
      .hover {
        border: 1px solid red;
      }
    }
  }

  /* 隐藏power */
  .bjs-powered-by {
    display: none;
  }

  /* 高亮 */
  // , .djs-element.selected .djs-outline
  .djs-element.hover .djs-outline {
    visibility: visible;
    shape-rendering: geometricPrecision;
    stroke-dasharray: 3, 3;
    stroke: var(--element-hover-outline-fill-color);
    stroke-width: 1px
  }
  .djs-element.selected .djs-outline {
    visibility: visible;
    shape-rendering: geometricPrecision;
    stroke-dasharray: 3, 3;
    stroke: var(--element-selected-outline-stroke-color);
    stroke-width: 2px
  }
}

/* 容器 */
.pu-bpmn-design {
  height: 100%;
  outline: 1px solid #e4e7ed;

  .el-container {
    height: 100%;

    .el-header {
      height: 50px !important;
      padding: 10px 20px;
      border-bottom: solid 1px #e4e7ed;
    }

    .el-main {
      height: calc(100% - 52px);
      padding: 0;
    }

    .el-aside {
      outline: 1px solid #e4e7ed;
      height: 100%;
    }

    /* tools */
    .cfd-tools {
      display: flex;
      //flex-flow: wrap;
      justify-content: space-between;

      &--left {
        white-space: nowrap;
      }
      &--right {
        white-space: nowrap;
        overflow: auto;
      }

      .el-button {
        padding: 8px 15px;
        color: #333333;

        i {
          font-size: 14px;
        }
      }

      .el-dropdown__caret-button {
        padding: 8px 5px !important;
      }
    }

    .cfd-panel {
      position: relative;
      overflow: inherit;
      transition: 0.3s;
    }


    .el-collapse {
      .el-collapse-item {
        &__header {
          font-size: 14px;
          color: #383838;
        }
      }
    }

    .el-dropdown {
      margin-left: 10px;
    }
  }
}

/* 抽屉 */
.c-f-d-drawer {
  .el-drawer__header {
    margin: 0;
    min-height: 20px;
    padding: 16px 12px 16px 24px;
    border-bottom: 1px solid #f0f0f0;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    word-wrap: break-word;
  }
}

/* 弹窗 */
.c-f-d-dialog {
  /* 调整表单输入框等宽度 */
  .el-form-item__content {
    & > * {
      width: 100%;
    }
  }
}


/* 调整按钮宽度 */
.element-drawer__button {
  margin-top: 8px;
  width: 100%;
  display: inline-flex;
  justify-content: space-around;

  button {
    width: 100%;
  }
}

/* 查看xml */
.c-f-d-drawer-pre {
  margin: 0;
  overflow: hidden;
  height: 100%;

  &-view {
    margin: 0;
    height: calc(100% - 69px);
  }

  .hljs {
    word-break: break-word;
    white-space: pre-wrap;
    height: 100%;
  }

  .hljs * {
    font-family: Consolas,Monaco,monospace
  }

  .c-f-d-drawer-tools {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 20px;

    button {
      flex: 1;
    }
  }

}

/* 设计器背景图 */
.bpmn-icon-color {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%3E%3Cpath%20d%3D%22m12.5%205.5.3-.4%203.6-3.6c.5-.5%201.3-.5%201.7%200l1%201c.5.4.5%201.2%200%201.7l-3.6%203.6-.4.2v.2c0%201.4.6%202%201%202.7v.6l-1.7%201.6c-.2.2-.4.2-.6%200L7.3%206.6a.4.4%200%200%201%200-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6%200%20.9.5%201.5%201.1%203%201.1zm-9.9%206%204.2-4.2%206.3%206.3-4.2%204.2c-.3.3-.9.3-1.2%200l-.8-.8-.9-.8-2.3-2.9%22%20%2F%3E%3C%2Fsvg%3E");
}

// 侧边收缩按钮
.cfd-panel-collapse-btn {
  display: flex;
  align-items: center;
  position: absolute;
  left: -17px;
  top: 40%;
  width: 15px;
  height: 90px;
  border: 1px solid #e4e7ed;
  border-right: none;
  border-radius: 90px 0 0 90px;
  background: #ffffff;
  cursor: pointer;
  color: #000000;
  z-index: 100;

  &:hover {
    background: #f6f6f6;
  }
}
